Skip to content

新增「枫叶·白 / 枫叶·黑」两套暖色主题,主题入口收敛到设置页 - #418

Open
raclen wants to merge 1 commit into
aimod-cc:betafrom
raclen:feat/maple-theme-settings
Open

raclen wants to merge 1 commit into
aimod-cc:betafrom
raclen:feat/maple-theme-settings

Conversation

@raclen

@raclen raclen commented Oct 31, 2026

Copy link
Copy Markdown

这个 PR 做了什么

两件事:把主题入口收敛到设置页一处,新增两套暖色独立色板「枫叶·白 / 枫叶·黑」。

1. 移除侧栏底部的主题三键

beta 上同一份偏好有两套控件:设置 → 显示 → 显示模式,和侧栏底部的 #theme-switch 三键。两边各自读写 localStorage 与 data-theme,状态容易互相打架,视觉上也重复。

本 PR 删掉侧栏那组,保留设置页作为唯一入口。ui-kit/styles/shell.css 里专为那个容器写的三条响应式规则一并删除(它们只会匹配一个已不存在的 id)。

2. 新增两个档位:maple-light / maple-dark(枫叶·白 / 枫叶·黑)

设置页「显示模式」从三档变五档:

档位 取值 底色 行为
跟随系统 system — 随 OS 切换
浅色 light #f8f8fa 固定浅色
深色 dark #000 固定深色
枫叶·白 maple-light 暖米白 固定浅色
枫叶·黑 maple-dark 暖石墨 固定深色

枫叶两档是独立完整色板,不是在内置两档上叠一层滤镜 —— ui-kit/styles/theme.css 里各补了 99 个 --ui-* 令牌,覆盖比内置 dark 块(93 个)还全。它们与内置两档的区别在色相:底色偏暖(米白 / 暖石墨而非冷灰 / 纯黑),主色是陶红 oklch(67.24% 0.1308 38.76) 而非品牌蓝,语义色(成功 / 警告 / 通用 / 国际 / 敏感)全部往暖里收,避免冷色打断整体暖调。

实现上值得注意的两点

一、窗口层级只认明暗两个语义。 setWindowTheme 接受的是浅 / 深,不是自定义主题名。所以 maple-light / maple-dark 必须映射到最接近的一侧再透传,否则标题栏会留在上一个档位的颜色 —— 深色界面配浅色标题栏。桌面端 ui/app.js、首屏内联脚本 ui/index.html、移动端 mobile/src/state/store.ts 三处判定口径已统一:

const dark = mode === 'dark' || mode === 'maple-dark'
  || (mode === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);

二、枫叶两档不读 prefers-color-scheme。 名字里的白 / 黑就是它们的底色,跟随系统会让「枫叶·白」在系统深色下变成黑底,与名字直接矛盾。watchSystemTheme() 只在 theme === 'system' 时重算,天然满足。

改动范围

  • ui-kit/styles/theme.css — 新增两个色板块(+243 行)
  • ui-islands/src/islands/settings-model.ts — THEME_MODES 五档、readThemeMode 取值校验、状态文案
  • ui-islands/src/islands/settings-page.tsx — themeStateText 补两档
  • ui-islands/src/desktop-shell.tsx — 删除侧栏 ThemeControl
  • ui-kit/styles/shell.css — 删除 #theme-switch 失效规则
  • ui/app.js、ui/index.html — 明暗判定与窗口标题栏映射
  • mobile/src/state/store.ts、mobile/src/pages/MorePage.tsx — 移动端同五档
  • i18n/i18n-src/{en,ja,ko,pt-BR,zh-Hant}/settings.json — 五语言译文
  • ui/islands/ui.{css,js}、ui/i18n/* — 重建产物

已验证

  • ui-islands 构建通过:tsc --noEmit 无错,vite build 1353 modules(ui.css 126.41 kB / ui.js 2,233.91 kB)
  • 真实浏览器点击五个档位,localStorage → data-theme → color-scheme → 计算后的 --ui-background 四者同步,无残留;枫叶两档分别落到 oklch(96.13% 0.0111 89.72) / oklch(21.38% .0042 84.59)
  • DOM 内已无 #theme-switch,构建产物里也没有
  • 五个档位的 --ui-* 令牌逐项比对:枫叶两档 99/99 完整,无遗漏

未验证:Tauri 真机壳的窗口标题栏联动(setWindowTheme 需要真实桌面壳,本次用桥桩模拟)、移动端 APK 实机表现。

想请维护者确认

  1. 档位命名:现在叫「枫叶·白 / 枫叶·黑」(maple-light / maple-dark)。如果想换成更中性的名字,或者认为这套暖色应该做成可扩展的主题注册表而不是硬编码两档,我可以改。
  2. 侧栏三键的删除:如果还有用户依赖侧栏快速切换,也可以改成「设置页为准 + 侧栏同步只读指示」而不是直接删。

🤖 本条回复由 AI Agent 生成

Generated by an AI agent.

🤖 Generated with Claude Code

…「显示模式」。两档各自固定明暗、不随系统变化;窗口标题栏与 `color-scheme` 随之同步,不会出现深色界面配浅色标题栏。桌面端、移动端、首屏内联脚本三处判定口径统一。

2. 移除:侧栏底部的主题三键(`#theme-switch`)。主题入口收敛到设置 → 显示 → 显示模式一处,避免同一份偏好有两套控件、状态互相打架;`ui-kit/styles/shell.css` 里为这个容器写的三条响应式规则一并删除。
3. 补全:五语言(en / ja / ko / pt-BR / zh-Hant)的档位名称、状态说明与提示文案。
4. 同期产物:重建 `ui/islands/ui.css` 与 `ui.js`,重编 `ui/i18n/*`。

窗口层级只认浅色 / 深色两个语义(`setWindowTheme`),所以枫叶两档需要映射到最接近的一侧,而不是把自定义名直接透传下去 —— `app.js` 与 `index.html` 的首屏脚本都按这个口径判定。

Co-Authored-By: Claude Code <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant